<template>
  <div ref="oLazyLoad" class="lazy-load" v-lazy="url">
    <van-loading type="spinner" color="#1989fa" />
  </div>
</template>

<script setup>
import { onBeforeMount, onMounted, ref } from "vue"

  const props = defineProps({
    url: { type: String, default: '' },
    size: { type: String, default: '5rem' },
    color: { type: String, default: '#000' } 
  })

  const oLazyLoad = ref(null);
  //  此时可以获取到dom，但并未触发 mounted
  onMounted(() => {
    oLazyLoad.value.dataset.size = props.size;
    oLazyLoad.value.dataset.color = props.color;
  })
</script>

<style lang="scss" scoped>
  .lazy-load {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>